<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>道聚城</title>
    <link rel="stylesheet" href="../css/top-nav.min.css">
    <link rel="stylesheet" href="../css/login_alert.min.css">
    <link rel="stylesheet" href="../css/banner.min.css">
    <link rel="stylesheet" href="../css/discount.min.css">
    <link rel="stylesheet" href="../css/footer.min.css">
    <link rel="stylesheet" href="../css/New_products.min.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/slider.css">
    <script src="../../dist/js/jquery.min.js"></script>
    <script src="../../dist/js/cookie.min.js"></script>
    <script src="../../dist/js/index.min.js"></script>
    <script src="../../dist/js/slider.min.js"></script>
    <script src="../../dist/js/additem.min.js"></script>
    <script src="../../dist/js/stair.min.js"></script>
    <script src="../../dist/js/jquery.lazyload.min.js"></script>
    <style id="css"></style>
</head>

<body>
    <!-- 登录界面 -->
    <div id="login-alert">
        <div class="alert-top">
            <h3><i class="alertclose right"></i></h3>
            <div class="login-wrap">
                <div class="loginh">
                    <div class="left">会员登录</div>
                    <div class="right">
                        还没有账号?
                        <a href="./register.html" id="zhuce" title="注册" target="_blank">立即注册</a>
                    </div>
                </div>
                <form action method="POST" id="login_form">
                    <input type="text" name="username" id="username" placeholder="用户名">
                    <input type="password" name="password" id="password" placeholder="密码">
                    <p class="login_btn">
                        <input type="button" value="登录" id="btn-login">
                        <input type="checkbox" id="save_login" checked="checked"> 保持登录
                        <a href="resetpwd.html" class="right" title="找回密码" target="_blank">忘记密码?</a>
                    </p>
                </form>
            </div>
        </div>
        <div class="alert-bottom">
            <div class="pd50">
                <h4>用第三方账号直接登录</h4>
                <ul>
                    <li class="sina">
                        <a href="javascript:;">微博账号登录</a>
                    </li>
                    <li style="margin-right: 0px;" class="qq">
                        <a href="javascript:;">QQ账号登录</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 顶部导航栏 -->
    <div id="top-nav">
        <div class="top-nav">
            <div class="top-left">
                <a href="javascript:;" title="手机版"><s class="top-img"></s>手机版</a>
                <i>|</i>
                <a href="" title="金币充值">金币充值</a>
                <script>
                    $('.top-left a').on('click', function() {
                        alert('此功能尚未开发');
                    });
                </script>
            </div>
            <div class="top-right">
                <div class="order"><a title="我的订单">我的订单</a></div>
                <i>|</i>
                <div class="personal"><a title="个人中心">个人中心</a></div>
                <i>|</i>
                <div class="unlogin">
                    您还未登录，请<a href="javascript:;" title="登录">登录</a>
                </div>
                <div class="logined" style="display: none">
                    <p>
                        欢迎您，
                        <a href="javascript:;" class="user"></a>
                        &nbsp;<a href="javascript:;" class="btn-out">退出</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!-- 搜索导航栏 -->
    <div id="search-nav">
        <div class="search-nav">
            <div class="logobox left">
                <a href="javascript:;" title="道聚城"></a>
            </div>
            <div class="logogame right">
                <a href="javascript:;" title="aion">
                    <img src="../images/14564556113168.jpg" alt="aion">
                </a>
            </div>
        </div>
    </div>
    <!-- 主导航栏 -->
    <div id="main-nav">
        <div class="main-nav">
            <ul class="left">
                <li class="nav-item current"><a href="javascript:;" class="btn_index">首页</a></li>
                <li class="nav-item"><a href="javascript:;" class="btn_shop" title="newProducts">商品列表</a></li>
                <li class="nav-item"><a href="javascript:;" class="btn_activity" title="activity">活动列表</a></li>
                <li class="nav-item"><a href="javascript:;" class="btn_discount" title="discount">限时折扣</a></li>
                <li class="nav-item"><a href="javascript:;" class="btn_beans" title="newProducts">聚豆乐园</a></li>
                <li class="nav-item"><a href="javascript:;" class="btn_around" title="around_shop">周边商城</a></li>
                <li class="nav-item"><a href="javascript:;" class="btn_personal">个人中心</a></li>
            </ul>
            <div class="nav-cart right">
                <a href="shop.html" class="btn-cart" title="购物车">
                    <i id="cartNum">( 0 )</i>
                    <s class="i-cart"></s> 购物车
                </a>
            </div>
        </div>
    </div>

    <!-- 轮播图部分 -->
    <div id="banner-wrapper">
        <div class="banner-wrapper">
            <div class="banner-left">
                <!-- 天气查询 -->
                <div class="weather">
                    <h3>亚特雷亚今日天气</h3>
                    <p class="wind"></p>
                    <p class="wind_"></p>
                    <p class="temp"></p>
                </div>
                <script>
                    $.ajax({
                        type: "get",
                        url: 'https://sapi.k780.com?app=weather.future&weaid=hangzhou&appkey=43964&sign=c7a29a1ef81720bee6eb6c54311d3757&jsoncallback=cb',
                        dataType: "jsonp",
                        jsonpCallback: 'cb',
                        success: function(res) {
                            var today = res.result[0];
                            $('.weather .wind').html('<span>' + today.weather + '<img src="' + today.weather_icon + '">→<img src="' + today.weather_icon1 + '"></span>');
                            $('.weather .wind_').html('风向：<span style="color:orangered">' + +today.wind + '</span>');
                            $('.weather .wind_').html('风速：<span style="color:orangered">' + today.winp + '</span>');
                            $('.weather .temp').html('温度：<span style="color:orange">' + today.temperature + '</span>');
                        }
                    });
                </script>
                <!-- IP地址查询 -->
                <div class="place">
                    <h3>当前所在地</h3>
                    <p class="operators"></p>
                    <p class="ip"></p>
                    <p class="att"></p>
                </div>
                <script>
                    $.ajax({
                        type: "get",
                        url: "http://api.k780.com/?app=ip.local&appkey=43964&sign=c7a29a1ef81720bee6eb6c54311d3757&format=json&jsoncallback=data",
                        dataType: "jsonp",
                        jsonpCallback: "data",
                        success: function(res) {
                            var result = res.result;
                            $('.place .operators').html('运营商：<span style="color:orangered">' + result.operators + '</span>');
                            $('.place .ip').html('IP：<span style="color:orangered">' + result.ip + '</span>');
                            $('.place .att').html('地址：<span style="color:orangered">' + result.att + '</span>');
                        }
                    });
                </script>
            </div>
            <div id="slider">
                <ul class="pic">
                </ul>
                <!--4个按钮-->
                <ul class="but">
                    <li class="active"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div class="banner-right">
                <a href="#activity" title="活动中心" class="i-act">活动中心</a>
                <a href="#newProducts" title="聚豆商城" class="i-jdmall">聚豆商城</a>
                <div class="djc-codebox">
                    <img src="../images/qr-weixin.png" alt="官方微信">
                    <p>官方微信</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 限时折扣 -->
    <div id="discount">
        <h3>限时抢购<span></span></h3>
        <ul class="discount">
            <!-- <li>
                <div class="likediv">
                    <p class="zj">
                        直降
                        <b>39.50Q币</b>
                    </p>
                    <a href="javascript:;">
                        <img src="../images/pkg-5506.jpg" width="121" height="222">
                    </a>
                    <p class="djname">
                        <em>死兆星 维鲁斯</em>
                    </p>
                    <p class="orange">
                        <b><strong>39.50</strong></b>元
                        <span class="ml10">
                            (<s>79QB</s>)
                        </span>
                    </p>
                    <a href="javascript:;" title="加入购物车" class="buy-cart">加入购物车</a>
                </div>
            </li> -->
        </ul>
    </div>
    <!-- 引入限时折扣商品 -->
    <script>
        $.ajax({
            type: "get",
            url: "../lib/getdiscount.php",
            dataType: "json",
            success: function(res) {
                var template = '';
                res.forEach((elm, i) => {
                    var pic = JSON.parse(elm.pic);
                    template += `
                        <li>
                            <div class="likediv">
                                <p class="zj">
                                    直降
                                    <b>${elm.price}Q币</b>
                                </p>
                                <a href="./details?type=1&id=${elm.id}">
                                    <img src=${pic[0].src} width="121" height="222">
                                </a>
                                <p class="djname">
                                    <em>${elm.title}</em>
                                </p>
                                <p class="orange">
                                    <b><strong>${elm.price}</strong></b>元
                                    <span class="ml10">
                                        (<s>${parseInt(elm.cost)}QB</s>)
                                    </span>
                                </p>
                                <a href="javascript:;" title="加入购物车" class="buy-cart" data-id="${elm.id}" data-price="${elm.price}">加入购物车</a>
                            </div>
                        </li>
                     `
                });
                $('#discount .discount').append(template).find('.buy-cart').on('click', function() {
                    if (cookie.get('username')) {
                        additem(1, this.dataset.id, this.dataset.price, 1);
                    } else {
                        alert('请先登录！');
                        $('.unlogin a').trigger('click');
                    }
                });
            }
        });
    </script>
    <!-- 新品上架 -->
    <div id="newProducts">
        <div class="new-left left">
            <h3>新品上架<span></span></h3>
            <div class="new-items">
                <!-- <dl>
                    <dt><a href="javascript:;">
                        <img src="../images/pkg-16408.jpg">
                    </a></dt>
                    <dd>
                        <a href="javascript:;" class="new-name">
                            <strong>1个杰作宝箱和钥匙赠1至臻点</strong>
                        </a>
                        <div class="new-qb">
                            Q币价: <span>13.00 Q币</span>
                        </div>
                        <div class="new-qb">
                            微信价: <span> ￥12.61</span>
                        </div>
                        <div class="new-cart">
                            <a href="javascript:;" class="new-btn-cart">加入购物车</a>
                        </div>
                    </dd>
                </dl> -->
            </div>
        </div>
        <!-- 导入新品 -->
        <script>
            $.ajax({
                type: "get",
                url: "../lib/getproduct.php",
                dataType: "json",
                success: function(response) {
                    var str = '';
                    response.forEach((elm, i) => {
                        var pic = JSON.parse(elm.pic);
                        str += `
                       <dl>
                            <dt><a href="./details?type=2&id=${elm.id}">
                                <img src=${pic[0].src}>
                            </a></dt>
                            <dd>
                                <a href="./details?type=2&id=${elm.id}" class="new-name">
                                    <strong>${elm.title}/strong>
                                </a>
                                <div class="new-qb">
                                    Q币价: <span>${elm.price} Q币</span>
                                </div>
                                <div class="new-qb">
                                    微信价: <span> ￥${(parseInt(elm.price)*0.97).toFixed(2)}</span>
                                </div>
                                <div class="new-cart">
                                    <a href="javascript:;" class="new-btn-cart" data-id="${elm.id}" data-price="${elm.price}">加入购物车</a>
                                </div>
                            </dd>
                        </dl>                    
                       `;
                    });
                    $('#newProducts .new-items').append(str).find('.new-btn-cart').on('click', function() {
                        if (cookie.get('username')) {
                            additem(2, this.dataset.id, this.dataset.price, 1);
                        } else {
                            alert('请先登录！');
                            $('.unlogin a').trigger('click');
                        }
                    });
                }
            });
        </script>
        <!-- 聚豆乐园 -->
        <div class="new-right right">
            <h3>聚豆乐园<span></span></h3>
            <ul class="lucky-list">
                <li><img class="lazy" data-original="../images/num.png"><span>5聚豆</span></li>
                <li><img class="lazy" data-original="../images/90.png"><span>10Q币</span></li>
                <li><img class="lazy" data-original="../images/num.png"><span>15聚豆</span></li>
                <li><img class="lazy" data-original="../images/90.png"><span>20Q币</span></li>
                <li><img class="lazy" data-original="../images/num.png"><span>25聚豆</span></li>
                <li><img class="lazy" data-original="../images/20170216_28862_2202.jpg" style="border-radius: 10px;"><span style="margin: 0;font-size: 16px;"> &nbsp;&nbsp;腥红之月 烬</span></li>
                <a href="javascript:;" class="btn-lucky">签到并抽奖</a>
            </ul>
            <p style="display: none;">今日签到获得：<span class="beans-num"></span></p>
        </div>
        <script>
            // 判断今日是否已经抽过奖
            if (cookie.get('lucky')) {
                $('.btn-lucky').html('已签到').addClass('notclick');
                $('.new-right p').css('display', 'block');
                $('.beans-num').html(cookie.get('lucky'));
                $('.btn-lucky').css("pointer-events", "none");
            }
            // 抽奖效果
            var count = 0;
            $('.btn-lucky').on('click', function() {
                if (cookie.get('username')) {
                    var li = $('.lucky-list li');
                    var that = this;
                    $(that).css("pointer-events", "none");
                    var timer = setInterval(function() {
                        $(li[count]).addClass('chosen').siblings().removeClass('chosen');
                        count++;
                        if (count >= 6) {
                            count = 0;
                        }
                    }, 300);
                    var time = Math.floor(Math.random() * 1800) + 3600;
                    setTimeout(function() {
                        clearInterval(timer);
                        alert('签到成功，并获得' + $('.chosen').text());
                        $('.beans-num').html($('.chosen').text());
                        // $(that).css("pointer-events", "auto"); 
                        cookie.set('lucky', $('.chosen').text(), 1);
                        $(li).removeClass('chosen');
                        $('.new-right p').css('display', 'block');
                        $(that).html('已签到').addClass('notclick');
                    }, time);
                } else {
                    alert('请先登录！');
                    $('.unlogin a').trigger('click');
                }
            });
        </script>
    </div>
    <!-- 周边商城 -->
    <div id="around_shop">
        <h3>周边商城 <span></span></h3>
        <ul>
            <li>
                <a href="javascript:;" class="pro-link" title="2018全球总决赛冠军卫衣">
                    <div class="prodimg"><img class="lazy" data-original="../images/20181121180406_69464.jpg" alt="440" title="2018全球总决赛冠军卫衣" width="460"></div>
                    <div class="prodinfo">
                        <p class="left prodname">2018全球总决赛冠军卫衣</p>
                        <p class="right prodpri">￥358.00</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="javascript:;" class="pro-link" title="海牛阿福收藏款毛绒 限量版">
                    <div class="prodimg"><img class="lazy" data-original="../images/20180821100550_62484.jpg" alt="440" title="海牛阿福收藏款毛绒 限量版" width="460"></div>
                    <div class="prodinfo">
                        <p class="left prodname">海牛阿福收藏款毛绒 限量版</p>
                        <p class="right prodpri">￥108.00</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="javascript:;" class="pro-link" title="九尾妖狐 阿狸 T恤">
                    <div class="prodimg"><img class="lazy" data-original="../images/20180504164611_22633.jpg" alt="440" title="九尾妖狐 阿狸 T恤" width="460"></div>
                    <div class="prodinfo">
                        <p class="left prodname">九尾妖狐 阿狸 T恤</p>
                        <p class="right prodpri">￥150.00</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="javascript:;" class="pro-link" title="奥德赛 金克丝 手办">
                    <div class="prodimg"><img class="lazy" data-original="../images/20181030143736_59367.jpg" alt="440" title="奥德赛 金克丝 手办" width="460"></div>
                    <div class="prodinfo">
                        <p class="left prodname">奥德赛 金克丝 手办</p>
                        <p class="right prodpri">￥150.00</p>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <!-- 精彩活动 -->
    <div id="activity">
        <h3>精彩活动<span></span></h3>
        <ul>
            <li>
                <div class="actbox">
                    <a href="javascript:;" class="linkfc">
                        <div class="actimg">
                            <div class="game-name">
                                <div class="namebg"></div>
                                <div class="name">英雄联盟</div>
                            </div>
                            <div class="game-status">火爆<br>进行中</div>
                            <img class="lazy" data-original="../images/340111098313835.jpg" alt="阿卡丽的黑金商店" width="380" height="148">
                        </div>
                        <div class="tips">
                            <div class="left game-tit">阿卡丽的黑金商店</div>
                            <p class="left">活动时间：2019-07-19~2019-07-31</p>
                            <div class="attention">
                                <span class="like">点赞</span>
                                <span>
                                <strong class="like-num">9157</strong>
                            </span>
                            </div>
                        </div>
                    </a>
                </div>
            </li>
            <li>
                <div class="actbox">
                    <a href="javascript:;" class="linkfc">
                        <div class="actimg">
                            <div class="game-name">
                                <div class="namebg"></div>
                                <div class="name">英雄联盟</div>
                            </div>
                            <div class="game-status">火爆<br>进行中</div>
                            <img class="lazy" data-original="../images/739581043087906.jpg" alt="幸运召唤师" width="380" height="148">
                        </div>
                        <div class="tips">
                            <div class="left game-tit">幸运召唤师</div>
                            <p class="left">活动时间：2019-07-12~2019-07-31</p>
                            <div class="attention">
                                <span class="like">点赞</span>
                                <span>
                                <strong class="like-num">22241</strong>
                            </span>
                            </div>
                        </div>
                    </a>
                </div>
            </li>
            <li>
                <div class="actbox">
                    <a href="javascript:;" class="linkfc">
                        <div class="actimg">
                            <div class="game-name">
                                <div class="namebg"></div>
                                <div class="name">英雄联盟</div>
                            </div>
                            <div class="game-status">火爆<br>进行中</div>
                            <img class="lazy" data-original="../images/51348588915737.jpg" alt="终极连击 电玩一夏" width="380" height="148">
                        </div>
                        <div class="tips">
                            <div class="left game-tit">终极连击 电玩一夏</div>
                            <p class="left">活动时间：2019-07-01~2019-07-31</p>
                            <div class="attention">
                                <span class="like">点赞</span>
                                <span>
                                <strong class="like-num">4802</strong>
                            </span>
                            </div>
                        </div>
                    </a>
                </div>
            </li>
        </ul>
    </div>
    <!-- 点赞功能 -->
    <script>
        $('.attention').on('click', function() {
            if (cookie.get('username')) {
                var num = parseInt($(this).find('.like-num').html());
                var like = $(this).find('.like');
                if (like.hasClass('likeclick')) {
                    num--;
                    like.removeClass('likeclick');
                    $(this).find('.like-num').html(num);
                } else {
                    num++;
                    like.addClass('likeclick');
                    $(this).find('.like-num').html(num);
                }
            } else {
                alert('请先登录!');
                $('.unlogin a').trigger('click');
            }
        });
    </script>
    <!-- 尾部 -->
    <div id="footer">
        <div class="footer-top">
            <div class="bx_qa_t1">
                <h4><s class="i_new"></s>我是新手</h4>
                <ul class="bx_qa_ul">
                    <li>什么是道聚城</li>
                    <li>如何购买</li>
                    <li>如何赠送</li>
                    <li>如何获取聚豆</li>
                </ul>
            </div>
            <div class="bx_qa_t1">
                <h4><s class="i_qa"></s>个人中心</h4>
                <ul class="bx_qa_ul">
                    <li>发货时间</li>
                    <li>如何领取</li>
                    <li>补发规则</li>
                    <li>Vip定价</li>
                    <li>道具状态定义</li>
                </ul>
            </div>
            <div class="bx_qa_t1">
                <h4><s class="i_pay"></s>支付方式</h4>
                <ul class="bx_qa_ul">
                    <li>支付方式</li>
                    <li>购物点支付</li>
                    <li>如何充值</li>
                </ul>
            </div>
            <div class="bx_qa_t1">
                <h4><s class="i_kf"></s>腾讯在线服务</h4>
                <ul class="bx_qa_ul">
                    <li>腾讯官方在线客服</li>
                </ul>
            </div>
            <div class="bx_qa_t1" style="width: 298px;">
                <ul class="bx_qa_ul">
                    <li style="float: left;margin-left: 40px;width: 100px;height: auto;">
                        <div class="foot-codeimg">
                            <img src="../images/zsdjc.png">
                        </div>
                        <p>掌上道聚城</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="footer_ied">
                <p>
                    <a href="javascript:;">腾讯互动娱乐</a> | <a href="javascript:;">服务条款</a> | <a href="javascript:;">腾讯游戏隐私保护指引</a> | <a href="javascript:;">广告服务</a> | <a href="javascript:;">腾讯游戏招聘</a> | <a href="javascript:;">腾讯游戏客服</a> | <a href="javascript:;">游戏地图</a>                    | <a href="javascript:;">成长守护平台</a> | <a href="javascript:;">商务合作</a> | <a href="javascript:;">网站导航</a>
                </p>
                <p>COPYRIGHT © 1998 – 2019 TENCENT. ALL RIGHTS RESERVED.</p>
                <p><a href="javascript:;">腾讯公司 版权所有</a></p>
            </div>
        </div>
    </div>
    <!-- 返回顶部栏 -->
    <div id="fixednav">
        <a href="#top"><i class="btn_top"></i> 返回顶部</a>
    </div>
</body>

</html>